import { type Directive, defineComponent, ref, withDirectives } from "vue";
import Button from "@/components/Button";

export default defineComponent({
  setup() {
    const el = ref<HTMLDivElement | null>(null);

    const handleClick = () => {
      if (el.value) {
        alert(el.value.innerHTML);
      }
    };

    const vDom: Directive<HTMLDivElement> = {
      mounted: (e) => {
        el.value = e;
      },
    };

    return () => (
      <div>
        {withDirectives(
          <div>
            Re<strong>f</strong>
          </div>,
          [[vDom]],
        )}
        <Button onClick={handleClick}>Show InnerHTML</Button>
      </div>
    );
  },
});
